<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫光</title>
    <style>
        .container-dl {
            margin: 10px auto;
            font-family: serif, 'Courier New', Courier, monospace;;
        }
        .box-dl {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 5px 10px;
            background-color: #c7dfff;
            margin-bottom: 10px;
            min-height: 30px;
        }
        .box-dl .title-dl {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .box-dl .box-content-dl {

        }

        .txt-dl {
            width: fit-content;
            font-size: 50px;
            letter-spacing: 5px;
            color: #9747FF;
        }
        /* 贴合文本的 */
        .txt-scan-dl {
            background-image: linear-gradient(45deg, #fff0 40%, #fffb, #fff0 60%);
            background-position: 0% center;
            background-size: 50%;
            background-repeat: no-repeat;
            /* currentColor 使用当前文本的颜色, 由于下方背景被剪裁, 看到的就是文字形状的背景 */
            background-color: currentColor;

            /* 把背景剪裁成文字的形状 */
            background-clip: text;
            -webkit-background-clip: text;
            /* 设置元素的文本内容的前景填充颜色, 默认为元素的color值 */
            /* 设为透明, 便于看到背景色, 即 看到文字形状的背景 */
            -webkit-text-fill-color: transparent;

            animation: at-txt-scan-dl 2s linear infinite;
        }
        /* 普通的 */
        .txt-scan-2-dl {
            background-image: linear-gradient(45deg, #fff0 40%, #fffb, #fff0 60%);
            background-position: 0% center;
            background-size: 50%;
            background-repeat: no-repeat;
            animation: at-txt-scan-dl 2s linear infinite;

            /* 用于突出 上面的背景 */
            /* background-color: #ddd; */
        }
        @keyframes at-txt-scan-dl {
            0% {
                background-position: -100%;
            }
            100% {
                background-position: 200%;
            }
        }

        .img-dl {
            /* 重要 */
            position: relative;
            overflow: hidden;
            width: 200px;
            height: 200px;
            
            /* 也可以设置 radius */
            /* border-radius: 50%; */
        }
        .img-dl img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .img-dl::before {
            content: '';
            position: absolute;
            /* 为简写属性, 对应于 top、right、bottom 和 left 属性. 与margin简写属性具有相同的多值语法. */
            inset: 0;
            background-image: linear-gradient(70deg, #fff0 40%, #fffb, #fff0 60%);
            animation: at-img-scan-dl 2s linear infinite;
            pointer-events: none;
        }
        @keyframes at-img-scan-dl {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(100%);
            }
        }

        .img2-dl {
            position: relative;
            overflow: hidden;
            width: fit-content;
            height: fit-content;

            /* 增加一个和目标图片一样的 mask, 可使 scan 在图片非透明区域展示 */
            /* mask-image: url(./assets/slogan.png);
            mask-repeat: no-repeat;
            mask-position: 0 0;
            mask-size: 100%; */
        }
        .img2-dl img {
            width: 300px;
        }
        .img2-dl::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(60deg, #fff0 40%, #fffb, #fff0 60%);
            animation: at-img2-scan-dl 2s linear infinite;
            pointer-events: none;
        }
        @keyframes at-img2-scan-dl {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(100%);
            }
        }
    </style>
</head>
<body>
    <div class="container-dl">
        <div class="box-dl">
            <div class="title-dl">文本</div>
            <div class="box-content-dl">
                <div class="txt-dl txt-scan-dl">测试文本</div>

                <div class="txt-dl txt-scan-2-dl">测试文本</div>
            </div>
        </div>

        <div class="box-dl">
            <div class="title-dl">矩形图片</div>
            <div class="box-content-dl">
                <div class="img-dl">
                    <img src="./assets/t1.jpeg" alt="" >
                </div>

                <div class="img-dl" style="border-radius: 50%;">
                    <img src="./assets/t1.jpeg" alt="" >
                </div>
                
            </div>
        </div>

        <div class="box-dl">
            <div class="title-dl">不规则图形</div>
            <div class="box-content-dl">
                <!-- 增加一个和目标图片一样的 mask, 可使 scan 在图片非透明区域展示 -->
                <div class="img2-dl" style="mask: url(./assets/slogan.png) 0 0/100% no-repeat;">
                    <img src="./assets/slogan.png" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
</html>